import { Table, Button } from 'antd';
import { connect } from 'umi';
import { useEffect } from 'react';
import { Link } from 'umi';

// @ts-ignore
const UserList = ({ dispatch, userList }) => {
  const { list, page } = userList;
  useEffect(() => {
    dispatch({
      type: 'userList/queryList',
      payload: page,
    });
  }, []);

  const columns = [
    {
      title: 'id',
      dataIndex: '_id',
      key: '_id',
    },
    {
      title: '用户名',
      dataIndex: 'username',
      key: 'username',
    },
    {
      title: '加密密码',
      dataIndex: 'password',
      key: 'password',
    },
    {
      title: '__v',
      dataIndex: '__v',
      key: '__v',
    },
  ];
  return (
    <div>
      <Link to="/">
        <Button>返回首页</Button>
      </Link>
      <Table
        dataSource={list}
        columns={columns}
        rowKey="_id"
        pagination={{
          ...page,
          current: page.pageNo,
          onChange: (pageNo, pageSize) => {
            dispatch({
              type: 'userList/queryList',
              payload: { pageNo, pageSize },
            });
          },
        }}
      />
    </div>
  );
};

// @ts-ignore
export default connect(({ userList }) => {
  return { userList };
})(UserList);
